<template>
    <div class="orhon-file-upload">
        <Upload :ref="refName" :show-upload-list="false" :on-success="handleSuccess" :format="format" :accept="accept" :data="data" :max-size="maxSize" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" :multiple="multiple" :type="type"
            :action="uploadUrl" :headers="headers" :style="customStyle">

            <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>
                    <span class="file_select_item_label">{{uploadDesWord}} </span>
                </p>
            </div>
        </Upload>

        <orh-preview-filelists v-if="uploadList!==null && uploadList.length > 0" :defaultFileList="uploadList">
        </orh-preview-filelists>

        <orh-preview-filelists v-if="defaultList!==null && defaultList.length > 0" :defaultFileList="defaultList">
        </orh-preview-filelists>
    </div>
</template>
<script>
    export default {
        props: {
            refName: {
                type: String,
                default: 'upload'
            },
            accept: {
                type: String,
                default: null
            },
            data: {
                type: Object,
                default: null
            },
            defauFileltList: {
                type: Array,
                default: () => []
            },
            uploadFileList: {
                type: Array,
                default: () => []
            },
            customStyle: {
                type: String,
                default: ''
            },
            uploadUrl: {
                type: String,
                default: '#'
            },
            type: {
                type: String,
                default: 'drag'
            },
            multiple: {
                type: Boolean,
                default: true
            },
            maxSize: {
                type: Number,
                default: 0
            },
            format: {
                type: Array,
                default: () => []
            },
            headers: {
                type: Object,
                default: () => {}
            },
            uploadDesWord: {
                type: String,
                default: ''
            },
            name: {
                type: String,
                default: 'file'
            }

        },
        data() {
            return {
                uploadList: [],
                defaultList: [],
            }
        },
        mounted() {
            this.uploadList = this.uploadFileList;
            this.defaultList = this.defauFileltList;
            this.uploadList = this.$refs[this.refName].fileList;
        },
        methods: {
            handleSuccess(res, file, fileList) {
                file.fileType = this.$util.getFileType(file.response.data.type);
                file.file_url = file.response.data.file_url;
            },
            handleFormatError(file) {
                console.log('File  ' + file.name + ' is too large, no more than ' + this.format + '.')
                // this.$Notice.warning({
                //     title: 'The file format is incorrect',
                //     desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
                // });
            },
            handleMaxSize(file) {
                console.log('File  ' + file.name + ' is too large, no more than ' + this.maxSize + '.')
                // this.$Notice.warning({
                //     title: 'Exceeding file size limit',
                //     desc: 'File  ' + file.name + ' is too large, no more than 2M.'
                // });
            },
            handleBeforeUpload() {
                const check = true;
                // const check = this.uploadList.length < 5;

                // if (!check) {
                //     this.$Notice.warning({
                //         title: 'Up to five pictures can be uploaded.'
                //     });
                // }
                return check;
            }
        },
        watch: {
            'uploadList': {
                handler: function (newVal, oldVal) {
                    this.$refs[this.refName].fileList = newVal;
                    this.$emit('update:uploadFileList', newVal);
                },
                deep: true
            },
            'defaultList': {
                handler: function (newVal, oldVal) {
                    this.$emit('update:defauFileltList', newVal);
                },
                deep: true
            },
        }
    }
</script>